<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="`测试账号管理`"></topTitle>
    <div class="mainCon">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="accountForm">
          <el-col :lg="8" :xl="6">
            <el-form-item label="账号" class="row-padding-bottom">
              <el-input
                placeholder="请输入"
                clearable
                v-model="filterField.projectName"
                @blur="filterField.projectName = changeValue($event)"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="账号状态" class="row-padding-bottom">
              <el-select
                placeholder="请选择"
                v-model="filterField.status"
                clearable
              >
                <el-option label="启用" value="1" />
                <el-option label="停用" value="0" />
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="appID" class="row-padding-bottom">
                <el-input
                  placeholder="请输入"
                  clearable
                  v-model="filterField.projectName"
                  @blur="filterField.projectName = changeValue($event)"
                />
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="appID状态" class="row-padding-bottom">
                <el-select
                  placeholder="请选择"
                  v-model="filterField.status"
                  clearable
                >
                  <el-option label="启用" value="1" />
                  <el-option label="停用" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="添加时间" class="row-padding-bottom">
                <el-select
                  placeholder="请选择"
                  v-model="filterField.status"
                  clearable
                >
                  <el-option label="启用" value="1" />
                  <el-option label="停用" value="0" />
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-form-item>
            <a
              @click="toggleAdvanced"
              style="margin-left: 40px; color: #409eff; cursor: pointer"
              class="btnColor"
            >
              {{ advanced ? '收起' : '展开' }}
              <i
                :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </a>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchTable"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              class="commonBut saveBtn funComBut"
              icon="icon iconfont icontianjia"
              @click="toAdd()"
            >
              <span class="opetareText">一键生成</span>
            </el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <!-- 列表 -->
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            align="center"
            prop="createTime"
            label="账号"
            :formatter="formatTd"
          />
          <el-table-column
            align="center"
            prop="name"
            label="密码"
            :formatter="formatTd"
          />
          <el-table-column align="center" prop="createTime" label="appId">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
              <el-switch
                v-model="scope.row.createTime"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                @change="changStatus($event, scope.row.uuid)"
              >
                >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="appSercet"
            :formatter="formatTd"
          />
          <el-table-column
            align="center"
            prop="createTime"
            label="添加时间"
            :formatter="formatTd"
          />
          <el-table-column
            align="center"
            label="操作"
            width="250px"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toDel(scope.row)">删除</el-link>
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息" />
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageSize="getpageSize"
          @getpageNo="getpageNo"
        />
      </div>
    </div>
  </div>
</template>

<script>
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'accountTestManageList',
  mixins: [scrollTable],
  data() {
    return {
      advanced: false,
      requestUrl: 'api-c/companyaudit/expand/companyauditlist', //表格请求路径
      loading: false,
      departmentTypeFun: '正式环境',
      isShow: false,
      tableData: [], //表格数据
      filterField: {
        companyName: '',
        type: '',
        machineNo: '',
        status: '',
        lastDate: '',
      },
      pageSize: 20,
      pageNo: 1,
      companyList: [], //项目名称下来列表
      pageSizeNumber: 20,
      total: 0,
      companyId: '',
      addOrEdit: '',
      formVisible: false,
      formData: {
        id: '',
        companyId: '',
        companyName: '',
        pointId: '',
        type: '',
        machineNo: '',
        direction: '',
        authCode: '',
        remark: '',
      },
    }
  },
  created() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /**
     * @description: 切换状态
     * @param {*} index
     * @param {*} row
     */
    changStatus($event, uuid) {
      const vm = this
      if ($event) {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '此操作将'),
            h('span', { style: 'color: #98F203' }, '启用'),
            h('span', '该appId?, 是否继续?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$message({
                type: 'success',
                message: '启用成功!',
              })
              done()
            } else {
              done()
            }
          },
        }).then((action) => {})
      } else {
        const h = this.$createElement
        this.$msgbox({
          title: '提示',
          message: h('p', null, [
            h('span', null, '此操作将'),
            h('span', { style: 'color: #FF4949' }, '停用'),
            h('span', '该appId?, 是否继续?'),
          ]),
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              this.$message({
                type: 'success',
                message: '停用成功!',
              })
              done()
            } else {
              done()
            }
          },
        }).then((action) => {})
      }
    },
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    //列表查询
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    toAdd() {},
    toDel(row) {
      this.$confirm('是否确定删除该账号?', '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
      })
        .then(() => {
          this.delete(row.id)
        })
        .catch(() => {})
    },
    delete(id) {
      this.axios({
        method: 'post',
        url: '',
        data: {
          id: id,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              this.$nextTick(function () {
                this.$refs.pagination.getTableListData()
              })
            } else {
              this.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .selectWidth {
    width: 100%;
  }

  .titleBox {
    border: none;
    background: #e4ebf1;
    padding: 14px 24px;
    margin-bottom: 0px;

    .listAddBtn {
      width: 136px;
      background: #009588;
      border: none;
    }

    .listAddBtn:hover {
      background: #009588;
      border-color: #009588;
      opacity: 0.8;
    }

    .blockTitle {
      font-weight: bold;
      font-size: 18px;
      color: #333;
      line-height: 40px;
    }
  }
}
/deep/ .el-tag {
  line-height: 23px;
  height: 23px;
}
@import '../../../static/css/filterArea.less';
</style>
